<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>充值记录</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/common.css" media="all">
    <script src="/js/layui/layui.all.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-tab layui-card">
        <ul class="layui-tab-title">
            <li class="layui-this">全部收费</li>
            <li>统计收费</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-form layui-card-header layuiadmin-card-header-auto" style="line-height: normal">
                    <div style="text-align: center;">
                        <div class="layui-form-inline">
                            <label style="padding: 0px 20px">充值日期</label>
                            <div class="layui-input-inline">
                                <input type="text" id="start_time" name="start_time" autocomplete="off" placeholder="请输入开始时间" class="layui-input">
                            </div> 至
                            <div class="layui-input-inline">
                                <input type="text" id="end_time" name="end_time" autocomplete="off" placeholder="请输入结束时间" class="layui-input">
                            </div>

                            <div class="layui-input-inline" style="padding-left: 50px;">
                                <input type="text" id="username" name="username" style="width: 190px" placeholder="输入App账号、邮箱" autocomplete="off" class="layui-input" />
                            </div>
                            <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="search-cz-submit">
                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="layui-card-body" style="width:98%;margin: 0 auto;">
                    <table class="layui-hide" id="test" lay-filter="cz-table"></table>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-form layui-card-header layuiadmin-card-header-auto" style="line-height: normal;">
                    <div style="text-align: center;">
                        <div class="layui-form-inline">
                            <label style="padding: 0px 20px">充值日期</label>
                            <div class="layui-input-inline">
                                <input type="text" id="start_time1" name="start_time1" autocomplete="off" placeholder="请输入开始时间" class="layui-input">
                            </div> 至
                            <div class="layui-input-inline">
                                <input type="text" id="end_time1" name="end_time1" autocomplete="off" placeholder="请输入结束时间" class="layui-input">
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">收费人</label>
                                <div class="layui-input-inline">
                                    <select name="shoufeiren" lay-verify="" lay-filter="shoufeiren" id="shoufeiren" lay-search>
                                        <option value="">请选择</option>
                                    </select>
                                </div>
                            </div>

                            <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="search-tj-submit">
                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="layui-card-body">
                    <table class="layui-hide" style="width:100%;" id="t1" lay-filter="t1"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="caozuo">
    <a class="layui-btn layui-btn-xs" lay-event="edit" >详情</a>
</script>
<script>
    layui.use(['table'], function() {
        var $ = layui.$;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        $.ajax({
            url:"/shoufei/getcaozuorenall" ,
            success:(res)=>{
                if(res.code == 200) {
                    for(var i in res.data) {
                        $("#shoufeiren").append(new Option(res.data[i].username , res.data[i].id))
                    }
                    form.render()
                }else{
                    layer.msg(res.msg)
                }
            }
        })
        table.render({
            elem: '#test',
            id: 'tt',
            url: '/shoufei/getRechargeRecord',
            cols: [
                [{
                    field: 'id',
                    title: '序号',
                    type: 'numbers',
                    align: 'center'
                },
                    {
                        field: 'uname',
                        title: 'App账号',
                        width : '18%',
                        align: 'center'
                    },
                    {
                        field: 'umail',
                        title: '邮箱',
                        width: '16%',
                        align: 'center'
                    },
                    {
                        field: 'money',
                        title: '充值金额',
                        width : '15%',
                        align: 'center'
                    },
                    {
                        field: 'recharge_time',
                        title: '充值时长(分钟)',
                        width : '15%',
                        align: 'center'
                    },
                    // {
                    //     field: 'shenyu_time',
                    //     title: '剩余时长(分钟)',
                    //     width : '12%',
                    //     align: 'center'
                    // },
                    {
                        field: 'create_time',
                        title: '充值时间',
                        width: '18%',
                        align: 'center'
                    },
                    {
                        field: 'sfrName',
                        title: '操作人员',
                        width: '15%',
                        align: 'center'
                    }]
            ], page: true
            ,page: {
                curr: layui.data("cz_page").index
            },
            done: (res, curr, count) => {
                layui.data("cz_page", {
                    key: 'index',
                    value: curr
                });
            }
        });

        //搜索操作
        form.on('submit(search-cz-submit)', function (data) {
            table.reload('tt', {
                where: {"username": data.field.username,"start_time":data.field.start_time,"end_time":data.field.end_time }
                , page: {
                    curr: 1
                }
            });
            return false;
        });

        table.render({
            elem: '#t1',
            id: 'tt1',
            toolbar: '#tb',
            // toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
            url: '/shoufei/sj_sf_group',
            cols: [
                [{field: '',fixed: 'left', unresize: true,title: '序号',type:'numbers',align: 'center' , width:"5%"}
                    , {field: '', title: '收费人', align: "center",width:"15%" , templet:function(res){
                        if(res.admin) {
                            return res.admin.username
                        }else {
                            return ""
                        }
                    }}
                    , {field: 'money', title: '累计收费' , width: "60%" , align: "center"}
                    , {fixed: 'right',title: '操作',align: 'center',toolbar: '#caozuo',width:"15%"}
                ]
            ],
            limit:10,
            page: true,
            page: {
                //curr: layui.data("shijianshoufeijilu_page").index
            },
            done: (res, curr, count) => {
                //console.log(res);
                layui.data("shijianshoufeijilu_page", {
                    key: 'index',
                    value: curr
                });
            }
        });

        //搜索操作
        form.on('submit(search-tj-submit)', function (data) {
            table.reload('tt1', {
                where: {"timeStart":$("#start_time1").val(),"timeEnd":$("#end_time1").val() , "sfr":data.value}
                , page: {
                    curr: 1
                }
            });
            return false;
        });
        //监听工具条
        table.on('tool(t1)', function (obj) {
            var data = obj.data;
            // console.log(data);
            if (obj.event === 'edit') {
                // console.log("点编辑了");
                layer.open({
                    type: 2,
                    title: data.admin.username+"收费记录" ,
                    area: ['80%', '80%'],
                    content: (encodeURI("sj_shoufei_detail.html?id="+data.sfr+"&timeStart="+$("#start_time1").val()+"&timeEnd="+$("#end_time1").val())), //这里content是一个普通的String
                    end: function(){
                        // location.reload();
                    }
                });
            }
        });
        form.on('select(shoufeiren)',function (data) {
            table.reload('tt1', {
                where: {"timeStart":$("#start_time1").val(),"timeEnd":$("#end_time1").val() , "sfr":data.value}
                , page: {
                    curr: 1
                }
            });
            return false;
        })

    });

</script>

<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        var endDate= laydate.render({
            elem: '#end_time',//选择器结束时间
            type: 'datetime',
            min:"1970-1-1",//设置min默认最小值
            done: function(value,date){
                startDate.config.max={
                    year:date.year,
                    month:date.month-1,//关键
                    date: date.date,
                    hours: 0,
                    minutes: 0,
                    seconds : 0
                }
            }
        });
        //日期范围
        var startDate=laydate.render({
            elem: '#start_time',
            type: 'datetime',
            max:"2099-12-31",//设置一个默认最大值
            done: function(value, date){
                endDate.config.min ={
                    year:date.year,
                    month:date.month-1, //关键
                    date: date.date,
                    hours: 0,
                    minutes: 0,
                    seconds : 0
                };
            }
        });
        var startDate1=laydate.render({
            elem: '#start_time1',
            type: 'datetime',
            max:"2099-12-31",//设置一个默认最大值
            done: function(value, date){
                endDate1.config.min ={
                    year:date.year,
                    month:date.month-1, //关键
                    date: date.date,
                    hours: 0,
                    minutes: 0,
                    seconds : 0
                };
            }
        });
        var endDate1= laydate.render({
            elem: '#end_time1',//选择器结束时间
            type: 'datetime',
            min:"1970-1-1",//设置min默认最小值
            done: function(value,date){
                startDate1.config.max={
                    year:date.year,
                    month:date.month-1,//关键
                    date: date.date,
                    hours: 0,
                    minutes: 0,
                    seconds : 0
                }
            }
        });
    });
</script>


</html>